<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>博客登录</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name='robots' content='noindex,follow' />
	<meta name="viewport" content="width=device-width" />
	
	<link rel="stylesheet" href="resources/plugin/font-awesome/css/font-awesome.min.css">
	<link rel="shortcut icon" href="resources/img/logo.png">
	<link rel='stylesheet' id='dashicons-css' href='resources/plugin/login/dashicons.min.css' type='text/css' media='all' />
	<link rel='stylesheet' id='buttons-css'	href='resources/plugin/login/buttons.min.css' type='text/css' media='all' />
	<link rel='stylesheet' id='forms-css' href='resources/plugin/login/forms.min.css' type='text/css' media='all' />
	<link rel='stylesheet' id='l10n-css' href='resources/plugin/login/l10n.min.css' type='text/css' media='all' />
	<link rel='stylesheet' id='login-css' href='resources/plugin/login/login.min.css'	type='text/css' media='all' />
	<link rel='stylesheet' href='resources/css/login.css' type='text/css' media='all' />
	<script src="resources/js/jquery.min.js"></script>
    <style>
        #verify {
			width: 100ox;
            height: 34px;
            font-size: 16px;
        }

        #code_img {
            width: 100px;
            height: 40px;
            cursor: pointer;
            vertical-align: top;
        }
    </style>
  </head>
  
  <body class="login login-action-login wp-core-ui  locale-zh-cn">
		<div id="login">
			<br /> <br />
			<form name="loginForm" id="loginForm" action="Login" method="post">		
				<p>
					<label for="user_login">用户名或电子邮件地址<br /> 
						<input type="text" name="userName" id="user_login" class="input" value="aaaaaa"	size="20" required />
					</label>
				</p>
				<p>
					<label for="user_pass">密码<br />
						 <input type="password" name="userPass" id="user_pass" class="input" value="aaaaaa"	size="20" required />
					</label>
				</p>
				
				<p>
					<h3>验证码</h3>
					<input id="yzm1" width="50px" required>
					<input type="hidden" id="yzm2" />
					<canvas width="100" height="40" id="verifyCanvas"></canvas>
					<img id="code_img">
				</p>
				
				<div>&nbsp;</div>
					
				<p class="forgetmenot">
					<label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="1" checked /> 记住密码</label>	
				</p>
				<p class="submit">
					<input type="submit" name="wp-submit" id="subm" class="button button-primary button-large" value="登录" />
				</p>
			</form>
	
			<p id="backtoblog">
				<a href="#">&larr; 去往博客前台</a>
			</p>
			
		</div>
		<div class="clear"></div>
		
		<script>
		
			var msg ="${msg}";
			if(msg!=""){
				alert(msg);
			}
			var nums = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
		        'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x',
		        'y', 'z'];

		    drawCode();
		    // 绘制验证码
		    function drawCode() {
				var str=""; //存放生成的值
		        var canvas = document.getElementById("verifyCanvas");  //获取HTML端画布
		        var context = canvas.getContext("2d");                 //获取画布2D上下文
		        context.fillStyle = "cornflowerblue";                  //画布填充色
		        context.fillRect(0, 0, canvas.width, canvas.height);   //清空画布
		        context.fillStyle = "white";                           //设置字体颜色
		        context.font = "25px Arial";                           //设置字体
		        var rand = new Array();
		        var x = new Array();
		        var y = new Array();
		        for (var i = 0; i < 5; i++) {
		            str+=rand[i] = nums[Math.floor(Math.random() * nums.length)]
		            x[i] = i * 16 + 10;
		            y[i] = Math.random() * 20 + 20;
		            context.fillText(rand[i], x[i], y[i]);
		        }
				
				//把生成的二维码放入到隐藏域
				$("#yzm2").val(str);
				
		        //画3条随机线
		        for (var i = 0; i < 3; i++) {
		            drawline(canvas, context);
		        }

		        // 画30个随机点
		        for (var i = 0; i < 30; i++) {
		            drawDot(canvas, context);
		        }
		        convertCanvasToImage(canvas)
		    }

		    // 随机线
		    function drawline(canvas, context) {
		        context.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));             //随机线的起点x坐标是画布x坐标0位置，y坐标是画布高度的随机数
		        context.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));  //随机线的终点x坐标是画布宽度，y坐标是画布高度的随机数
		        context.lineWidth = 0.5;                                                  //随机线宽
		        context.strokeStyle = 'rgba(50,50,50,0.3)';                               //随机线描边属性
		        context.stroke();                                                         //描边，即起点描到终点
		    }
		    // 随机点(所谓画点其实就是画1px像素的线，方法不再赘述)
		    function drawDot(canvas, context) {
		        var px = Math.floor(Math.random() * canvas.width);
		        var py = Math.floor(Math.random() * canvas.height);
		        context.moveTo(px, py);
		        context.lineTo(px + 1, py + 1);
		        context.lineWidth = 0.2;
		        context.stroke();

		    }
		    // 绘制图片
		    function convertCanvasToImage(canvas) {
		        document.getElementById("verifyCanvas").style.display = "none";
		        var image = document.getElementById("code_img");
		        image.src = canvas.toDataURL("image/png");
		        return image;
		    }

		    // 点击图片刷新
		    document.getElementById('code_img').onclick = function () {
		        $('#verifyCanvas').remove();
		        $('#yzm1').after('<canvas width="100" height="40" id="verifyCanvas"></canvas>')
		        drawCode();
		    }
		    
		    //验证验证码输入是否正确
		    $("#subm").click(function(){
		    	var r=false;
		    	var v=$("#yzm1").val();
		    	var v2=$("#yzm2").val();
		    	if(v.length == v2.length && v.toLowerCase()==v2.toLowerCase()){
		    		r=true;
		    	}else{
		    		alert("验证码错误");
		    		$("#yzm1").val("");
		    	}
		    	return r;
		    });
		    
		</script>
	</body>
</html>